<template>
  <div class="stock-tree">
    <el-cascader
      v-model="stockValue"
      :options="options"
      :props="props"
      :show-all-levels="false"
      clearable
      filterable
      @change="handleChange"
      v-bind="$attrs"
    ></el-cascader>
  </div>
</template>

<script>
  import { STOCKS } from '@/utils/stock';

  export default {
    props: {
      value: {
        default: '',
      },
    },
    data() {
      return {
        showTree: false,
        stockValue: '',
        props: { multiple: true, checkStrictly: true, emitPath: false },
        options: STOCKS,
      };
    },
    watch: {
      value() {
        if (typeof this.value === 'string') {
          this.stockValue = this.value.split(',');
        }
      },
    },
    methods: {
      handleChange() {
        this.$emit('input', this.stockValue.join(','));
      },
    },
  };
</script>

<style lang="scss" scoped>
  .stock-tree {
    position: relative;

    .el-cascader {
      width: 100%;
    }
  }
</style>
